<template>
    <page-dialog
      :title="dialogInfo.title"
      v-model:visible="shows"
      :width="dialogInfo.width"
      :bt-list="dialogInfo.btList"
    >
      <!-- 条件栏 -->
      <NewPageFilter
        v-model:query="filterInfo.query.queryMap"
        :filter-list="filterInfo.searchList"
        :filter-btn="filterInfo.searchBtn"
        :list-type-info="listTypeInfo"
      />
      <DialogTable
        :refresh="tableInfo.refresh"
        :init-curpage="tableInfo.initCurpage"
        v-model:data="tableInfo.data"
        :api="api"
        ref="resourceTable"
        :query="filterInfo.query.queryMap"
        :field-list="tableInfo.fieldList"
        :handle="tableInfo.handle"
        :highlight-row="highlightRow"
        :checked-list="checkedList"
        :reserve-selection="true"
        :check-box="checkBox"
        @handleEvent="handleEvent"
      >
        <template #col-commonName="scope">
          <p>{{ scope.row.commonName || '-' }}</p>
          <p>{{ scope.row.productCode || '-' }}</p>
          <p>{{ scope.row.alias || '-' }}</p>
        </template>
        <template #col-standard="scope">
          <p>{{ scope.row.standard || '-' }}</p>
          <p>{{ scope.row.unitName || '-' }}</p>
        </template>
        <template #col-type="scope">
          <p>{{ scope.row.productTypeValue || '-' }}</p>
          <p>{{ scope.row.codeTypeValue || '-' }}</p>
          <p>{{ scope.row.productCategoryValue || '-' }}</p>
        </template>
        <template #col-supplierName="scope">
          <p>{{ scope.row.supplierName || '-' }}</p>
        </template>
        <template #col-licenseNumber="scope">
          <p>{{ scope.row.licenseNumber || '-' }}</p>
          <p>{{ scope.row.brandName || '-' }}</p>
        </template>
      </DialogTable>
    </page-dialog>
  </template>
  <script setup name="selectProduct">
  import { getProductPage, getSupplierAll } from '@/api/core.js'
  const { proxy } = getCurrentInstance()
  const emits = defineEmits()
  
  const props = defineProps({
    highlightRow: {
      type: Boolean,
      default: false,
    },
    checkBox: {
      type: Boolean,
      default: true,
    },
    api: {
      type: Function,
      default: getProductPage,
    },
    showDialog: {
      type: Boolean,
      default: false,
    },
    showSupplierName: {
      type: Boolean,
      default: false,
    },
    query: {
      type: Object,
      default: function () {
        return {}
      },
    },
    showStock: {
      type: Boolean,
      default: false,
    },
    checkedList: {
      type: Array,
      default: () => {
        return []
      },
    },
  })
  
  // 过滤相关配置
  const filterInfo = ref({
    query: {
        
    //   sortString: '',
    //   groupMap: {},
    //   groups: [],
      queryMap: {
        searchType: 'product',
        // status: 1,
        type: 0,
        licenseId: -2,
        sort: 'common_name,standard',
        ...props.query,
      },
    },
    searchList: [
      {
        componentType: 'input',
        label: '名称/别名/编码/助记符',
        value: 'keyword',
        event: search,
        hidden: false,
        show: true,
      },
      {
        label: '供应商',
        value: 'supplierIdMult',
        componentType: 'slip-select',
        api: getSupplierAll,
        query: { sort: 'create_time desc' },
        clearable: true,
        multiple: true,
        keyField: 'supplierName',
        valueField: 'supplierId',
        event: search,
      },
    ],
    searchBtn: [{ type: 'button', label: '搜索', event: search }],
  })
  // 表格相关
  const tableInfo = ref({
    refresh: 1,
    initCurpage: 1,
    data: [],
    fieldList: [
      {
        label: '通用名称\n编码\n别名',
        value: 'commonName',
        minWidth: 220,
        type: 'slot',
      },
      { label: '规格\n计量单位', value: 'standard', type: 'slot' },
      {
        label: '产品类型\n条码类型\n产品分类',
        value: 'type',
        minWidth: 150,
        type: 'slot',
      },
      { label: '助记符', value: 'mnemonic', width: '100px' },
      {
        label: '证号\n生产厂家',
        value: 'licenseNumber',
        minWidth: 220,
        type: 'slot',
      },
    ],
  })
  // 弹窗相关
  const dialogInfo = ref({
    title: '选择产品',
    width: '70%',
    btLoading: false,
    btList: [
      { label: '关闭', event: handleClose, show: true },
      {
        label: '保存',
        type: 'primary',
        disabled: false,
        event: save,
        show: true,
      },
    ],
  })
  const selectRow = ref([])
  const listTypeInfo = ref({
    supplierList: [],
  })
  
  const shows = computed({
    get() {
      return props.showDialog
    },
    set(newValue) {
      emits('update:showDialog', newValue) // 更新父组件shows
    },
  })
  
  watch(
    () => tableInfo.value.data,
    (val) => {
      if (val.length && props.checkedList.length) {
        props.checkedList.forEach((row) =>
          proxy.$refs['resourceTable'].toggleRowSelection(row, true)
        )
      }
    }
  )
  // 获取列表
  function getList() {
    tableInfo.value.refresh = Math.random()
  }
  function search() {
    tableInfo.value.initCurpage = Math.random()
    tableInfo.value.refresh = Math.random()
  }
  function save() {
    handleClose()
    emits('callback', selectRow.value)
  }
  function handleEvent(event, data) {
    switch (event) {
      case 'tableClickRow':
        selectRow.value = data
        break
      case 'tableCheck':
        selectRow.value = data
        break
    }
  }
  // 关闭弹窗前的回调
  function handleClose() {
    shows.value = false
    emits('reset')
  }
  onMounted(() => {
    // hack, 在table创建出来之后再去调用
    proxy.$nextTick(() => {
      if (props.showStock) {
        tableInfo.value.fieldList.push({
          label: '库存数量',
          value: 'stockQty',
          type: 'column',
          formatter: proxy.$fn.qtyFormatter,
        })
      }
      if (props.showSupplierName) {
        tableInfo.value.fieldList.splice(3, 0, {
          label: '供应商名称',
          value: 'supplierName',
          minWidth: 150,
          type: 'slot',
        })
      }
      getList()
    })
  })
  </script>
  
  <style scoped></style>
  